【Middleman】静的サイトジェネレータを使用してみる。

私は主に業務ではフロント側を担当させていだたいて、
Webアプリ等で使用する静的なひな形ファイルを作成することがあり、ファイルの修正が手間だったりすることがよくあります。
今回は、そんな手間を解決してくるツールをご紹介したいと思います。

アジェンダ

• Middlemanとは？
• インストール
• 使用方法
• 開発の流れ
• まとめ

Middlemanとは？

静的なWebサイトを構築する際に、とても便利なコマンドラインツールです。

主な特徴

• 開発用ローカルサーバーで、確認ができる。
• テンプレート言語、メタ言語を静的ファイルへビルドしてくれる。
• いろいろなテンプレート言語にも対応
• css、jsをminifyしてを出力してくれる。
• layout機能、partial機能などで共通するhtmlを再利用できる。
• などなど。

makes developing websites simple

Middleman:公式サイト

web サイトの開発をシンプルに

有志の方が、公式サイトを日本語翻訳してくださいました。めちゃくちゃありがたいです！ありがとうございます！
Middleman:日本語サイト

インストール

インストールする前に。。。

Middlemanを動かすためには、Rubyがインストールされている必要があります。

Rubyインストールがまだの方は、以下記事を参考にインストールをしてください。

• コーダー必見、SCSS・Compassで開発効率アップ｜Sublime Text 2でコンパイル編
• rbenvとruby-buildで複数バージョンのrubyをインストール

インストールしてみます。

$ gem install middleman

上記、コマンドでインストール完了です。

使用方法

主なコマンドは３つ

1.プロジェクトフォルダを作成

$ middleman init

プロジェクト用のひな形フォルダ・ファイルを作成してくれます。

2.開発用ローカルサーバーを起動

$ middleman server

ローカルサーバー起動して、そちらから開発中のプロジェクトを確認することができます。

3.ファイルをビルド（静的ファイルの出力）

$ middleman build

プロジェクトフォルダのファイルをサーバーへアップする用の静的ファイルに出力してくれます。

開発の流れ

主な開発の流れ

1. プロジェクトフォルダを作成
2. 開発用ローカルサーバーを起動
3. 静的ファイルを出力
4. 本番サーバーへアップ

1.プロジェクトフォルダを作成

$ cd （どこか作業用のディレクトリに移動）
$ middleman init sample

コマンドラインから作業用ディレクトリに移動し、上記コマンドを実行します。
すると、移動したディレクトリ内にsampleのディレクトリが作成されます。

ファイルの構成は以下の用になります。

実際に開発するデータはsourceフォルダ内で作業していくことになります。

2.開発用ローカルサーバーを起動

プロジェクトファイルが作成されたので、現在のプロジェクトを開発用ローカルサーバーで確認します。
今回は確認用でデフォルトのプロジェクトファイルにて確認してみます。

$ cd sample（作業用のsampleディレクトリ内に移動）
$ middleman server

作業用ディレクトリに移動して、上記コマンドを実行します。

すると、開発用のローカルサーバーが起動してくれ、http://localhost:4567/で現在の開発中サイトが確認できます。

以下の画面がでれば成功です。

3.静的ファイルを出力

開発が完了しましたら、本番サーバーへアップする静的なファイルをビルド（出力）します。

$ cd sample（作業用のsampleディレクトリ内に移動）
$ middleman build

上記コマンドで実行後、作業ディレクトリ内にbuildファイルが出力されていれば成功です。

本番サーバーへアップ

出力されたbuildフォルダ内を本番サーバーへアップすればOKです。

まとめ

今回はMiddlemanでWebサイトを開発する際の、大まかな流れをご紹介いたしました。
次回から、Middlemanの様々な機能をご紹介していければと思います。

参考サイト

• Middleman:公式サイト
• Middleman:日本語サイト
• 静的サイトの構築に便利:MiddleMan